<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蔡艺婷</title>
    <link rel="stylesheet" href="./css/all.min.css">
    <link rel="stylesheet" href="./css/style01.css">
    <link rel="stylesheet" href="./css/about01.css">
</head>
<body>
    <header>
        <div class="container">    
            <div class="logo">         
                <img src="img/logo_white.png" alt="">
            </div>
            <label for="menucheck" class="menu-icon">
                <em></em>
                <em></em>
                <em></em>
            </label>
            <input type="checkbox" id="menucheck">
            <ul>
                <li><a href="index01.html" taget="_self">首页</a></li>
                <li><a href="case01.html" taget="_self">最新案例</a></li>
                <li class="actived"><a href="about01.html" taget="_self">关于我们</a></li>
                <li><a href="concat01.html" taget="_self">联系我们</a></li>
            </ul>
            <div class="clear"></div>
            
        </div>
    </header>
    <!-- <div id="header"></div> -->
    <div class="banner">
        <div class="main-text">
            <h1>
                独具匠心 专注品质
            </h1>
            <span>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, cumque obcaecati? Ad molestias, iusto, explicabo quasi est placeat tempore atque architecto fuga adipisci qui vel natus quod dicta provident dolorum.
            </span>
        </div>
    </div>
    <div class="container lists">
        <div class="title">
            关于我们
        </div>
        <div class="pic-lists">
            <div class="pic-list">
                <div class="img">

                    <img src="img/a1.jpg" alt="">
                </div>
                <div class="picinfo">
                    <div class="pic-title">
                        自由创意
                    </div>
                    <div class="pic-desc">
                       Lorem ipsum, dolor sit amet consectetur adipisicing elit. Modi cumque magni accusamus, similique voluptas suscipit doloremque ullam soluta quo assumenda possimus quas ab explicabo aut dolore. Necessitatibus est, perspiciatis, nobis pariatur ratione eius velit sed distinctio fugiat quaerat, odit voluptatibus ea earum ipsa temporibus sunt unde ad! Deserunt qui sit culpa illo quidem temporibus vel nam obcaecati magni error, minus dicta pariatur itaque dolorem perferendis natus ullam dolores fuga doloremque consectetur saepe non! Harum, unde deleniti eveniet quis ratione repellendus!
                    </div>
                </div>
                <div class="clear"></div>
                
            </div>
            <div class="pic-list">
                <div class="img">

                    <img src="img/a1.jpg" alt="">
                </div>
                <div class="picinfo">
                    <div class="pic-title">
                        自由创意
                    </div>
                    <div class="pic-desc">
                       Lorem ipsum, dolor sit amet consectetur adipisicing elit. Modi cumque magni accusamus, similique voluptas suscipit doloremque ullam soluta quo assumenda possimus quas ab explicabo aut dolore. Necessitatibus est, perspiciatis, nobis pariatur ratione eius velit sed distinctio fugiat quaerat, odit voluptatibus ea earum ipsa temporibus sunt unde ad! Deserunt qui sit culpa illo quidem temporibus vel nam obcaecati magni error, minus dicta pariatur itaque dolorem perferendis natus ullam dolores fuga doloremque consectetur saepe non! Harum, unde deleniti eveniet quis ratione repellendus!
                    </div>
                </div>
                <div class="clear"></div>
                
            </div>
            <div class="pic-list">
                <div class="img">

                    <img src="img/a1.jpg" alt="">
                </div>
                <div class="picinfo">
                    <div class="pic-title">
                        自由创意
                    </div>
                    <div class="pic-desc">
                       Lorem ipsum, dolor sit amet consectetur adipisicing elit. Modi cumque magni accusamus, similique voluptas suscipit doloremque ullam soluta quo assumenda possimus quas ab explicabo aut dolore. Necessitatibus est, perspiciatis, nobis pariatur ratione eius velit sed distinctio fugiat quaerat, odit voluptatibus ea earum ipsa temporibus sunt unde ad! Deserunt qui sit culpa illo quidem temporibus vel nam obcaecati magni error, minus dicta pariatur itaque dolorem perferendis natus ullam dolores fuga doloremque consectetur saepe non! Harum, unde deleniti eveniet quis ratione repellendus!
                    </div>
                </div>
                <div class="clear"></div>
                
            </div>
           

       

            
        </div>
    </div>
    <div class="concat">
        <div class="container">

            <div class="title">
                联系我们
            </div>
            <div>
                <!-- 二维码 -->
                <div class="qrcode">
                    <img src="img/qrcode.jpg" alt="公众号二维码" width="120">
                    <div class="center">
                        关注公众号
                    </div>
                </div>
                <div class="qrcode">
                    <img src="img/qrcode.jpg" alt="App二维码" width="120">
                    <div class="center">
                        下载app
                    </div>
                </div>
                <div class="info-box">
                    <div class="line">
                        <span class="title-small">
                            QQ:
                        </span>
                        <span class="info">
                            2222xxxx22
                        </span>
                    </div>

                    <div class="line">
                        <span class="title-small">
                            邮箱:
                        </span>
                        <span class="info">
                            xxxx@qq.com
                        </span>
                    </div>

                    <div class="line">
                        <span class="title-small">
                            微博:
                        </span>
                        <span class="info">
                            xxxx
                        </span>
                    </div>

                    <div class="line">
                        <span class="title-small">
                          地址:
                        </span>
                        <span class="info">
                            山东省青岛市xx区xx路2号
                        </span>
                    </div>
                </div>

                <div class="phone">
                    <i class="fas fa-phone-volume fa-3x">
                    </i>
                    <span>
                        0591-88XXXX888
                        <!-- span不能修改宽高 -->
                    </span>
                </div>

                <div class="clear"></div>
            </div>
        </div>
    </div>
    <footer class="center">
        <!-- center 居中属性 -->
        Copyright &copy; 2024XXXXX公司版权所有
    </footer>
</body>
</html>